<template>
    <el-header class="ba-header">
        <el-row justify="center" v-if="false">
            <el-col class="ba-header-row" :xs="24" :sm="24" :md="16">
                <client-only>
                    <div @click="navigateTo({ name: '/' })" class="header-logo">
                        <img src="~/assets/images/logo.png" />
                        <span class="site-name">{{ siteConfig.siteName }}</span>
                    </div>
                    <div
                        v-if="!memberCenter.state.menuExpand"
                        @click="memberCenter.toggleMenuExpand(true)"
                        class="user-menus-expand hidden-md-and-up"
                    >
                        <Icon name="fa fa-indent" color="var(--el-color-primary)" size="20" />
                    </div>

                    <!-- globals.menu.show 解决切换路由时菜单内部的 el-popper 报警告的问题 -->
                    <!-- Slot "default" invoked outside of the render function -->
                    <el-scrollbar class="hidden-sm-and-down">
                        <Menu class="frontend-header-menu" :ellipsis="false" mode="horizontal" />
                    </el-scrollbar>
                </client-only>
            </el-col>
        </el-row>
        <client-only v-if="false">
            <el-drawer
                class="ba-aside-drawer"
                :append-to-body="true"
                v-model="memberCenter.state.menuExpand"
                :with-header="false"
                direction="ltr"
                size="40%"
            >
                <div class="ba-header-row">
                    <div @click="navigateTo({
                     name: '/' })" class="header-logo">
                        <img src="~/assets/images/logo.png" />
                        <span class="site-name">{{ siteConfig.siteName }}</span>
                    </div>
                    <div @click="memberCenter.toggleMenuExpand(false)" class="user-menus-expand hidden-md-and-up">
                        <Icon name="fa fa-dedent" color="var(--el-color-primary)" size="20" />
                    </div>
                </div>
                <Menu :show-icon="true" mode="vertical" />
            </el-drawer>
        </client-only>
    </el-header>
</template>
<script setup lang="ts">
const siteConfig = useSiteConfig()
const memberCenter = useMemberCenter()
</script>
<style scoped lang="scss">
</style>
